<template>
  <div class="home">
    <chart-top :chartData="chartData"></chart-top>
    <chart-Main></chart-Main>
    <chart-bottom></chart-bottom>
  </div>
</template>

<script setup lang="ts">
// 引入接口
import { reqChartsData } from "../../api/home/home";
// 引入组合式API
import { onMounted, ref } from "vue";
// 引入子组件
import ChartTop from "./ChartTop/index.vue";
import ChartMain from "./ChartMain/index.vue";
import ChartBottom from "./ChartBottom/index.vue";

// 存储服务器返回的数据
let chartData = ref({});
onMounted(async () => {
  let result = await reqChartsData();
  console.log(result);
  chartData.value = result;
});
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #ccc;
}
</style>